import React, {Component} from 'react'
import {Input, LoginWrapper} from "./styled";
import {connect} from 'react-redux'
import { actionCreater } from './store'
import { Redirect } from 'react-router-dom'

class Login extends Component {
    render() {
        const { login, loginStatus } = this.props
        if(loginStatus){
            console.log(123)
            return <Redirect to='/' />
        }else{
            return <div>

                <LoginWrapper>
                    <Input type="text" placeholder="用户名" innerRef={(input) => {
                        this.account = input
                    }}/>
                    <Input type="password" placeholder="密码" innerRef={(input) => {
                        this.password = input
                    }}/>
                    <button className="login-btn" onClick={()=>login(this.account,this.password)}>登录</button>
                </LoginWrapper>
            </div>
        }
    }
}
const mapState =(state) => ({
    loginStatus:  state.getIn(['login','loginStatus'])
})

const mapDispatch = (dispatch) => ({
    login(account,password) {
        dispatch(actionCreater.ajaxLogin(account.value,password.value))
    }
})

export default connect(mapState, mapDispatch)(Login)